.slider {
  position: relative;
  height: 16px;
}

.slider:before, .slider:after {
  content: '';
  position: absolute;
  top: 4px;
  bottom: 0;
  margin: auto;
  height: 8px;
  width: 1px;
}

.slider:before {
  left: 0;
  background: #111
}

.slider:after {
  right: 0;
  background: #ddd;
}

.slider .bar {
  top: 9px;
  height: 2px;
}

.slider .bar-0 {
  background: #111;
}

.slider .bar-1 {
  background: #ddd;
}
.slider .handle {
  position: absolute;
  background: #FFF;
  border: 3px solid #000;
  width: 20px;
  height: 20px;
  border-radius: 25px;
  box-shadow: 1px 1px 1px rgba(0,0,0,0.1);
  transition: transform 400ms;
  cursor: grab;
}
.slider .handle:active {
  transition: transform 75ms;
  transform: scale(1.2, 1.2);
  cursor: grabbing;
}
